import React from "react";
import VoteFooter from "./VoteFooter";
import VoteMain from "./VoteMain";
class Vote extends React.Component {
    state = {
        supNum: 10,
        oppNum: 5
    }
    //设置为箭头函数：不论方法在哪执行的，方法中的this，永远都是父组件Vote父组件的实例
    change = (type) => {
        let {supNum,oppNum} = this.state;
        if (type === 'sup') {
            this.setState({
                supNum: supNum + 1
            })
            return
        }
        this.setState({
            oppNum: oppNum + 1
        })
    }
    
    render() {
        let {supNum,oppNum} = this.state;
        return <div className="vote-box">
            <div className="header" style={{
                display: 'flex',
            }}>
                <h2 className="title">React是很棒的前端框架</h2>
                <span className="num" style={{
                    paddingTop: 23,
                    marginLeft: 56
                }}>{supNum + oppNum}</span>
            </div>
            <VoteMain supNum={supNum} oppNum={oppNum}/>
            {/* 父组件把“修改自己状态“的方法，基于”属性”传递给儿子，儿子可以把传递的方法执行，实现子改父 */}
            <VoteFooter change={this.change}/>
        </div>
    }
}
export default Vote